<template>
  <a-card>
    <template #title>
      <a-button-group>
        <a-button type="primary" size="small" @click="addGroup">
          <template #icon>
            <icon-plus />
          </template>
          添加条件组
        </a-button>
        <a-button type="primary" size="small" @click="viewForm">
          <template #icon>
            <icon-eye />
          </template>
          预览表单
        </a-button>
        <a-button type="primary" size="small" @click="conditionTest">
          <template #icon>
            <icon-experiment />
          </template>
          测试条件
        </a-button>
      </a-button-group>
    </template>
    <template #extra>
      <div class="relation-wrapper">
        <div class="label-wrapper">条件组关系</div>
        <a-switch
          v-model="conditionGroup.relationship"
          type="round"
          checked-color="#F53F3F"
          unchecked-color="#14C9C9"
        >
          <template #checked>且</template>
          <template #unchecked>或</template>
        </a-switch>
      </div>
    </template>
    <!-- 条件组设置 -->
    <a-empty v-if="conditionGroup.groups.length <=0" />
    <a-tabs
      v-else
      v-model:active-key="activeKey"
      position="top"
      type="line"
      :editable="true"
      @delete="deleteGroup"
    >
      <a-tab-pane
        v-for="group of conditionGroup.groups"
        :key="group.key"
        :title="group.name"
      >
        <a-row justify="space-between">
          <a-col :span="15">
            <a-input v-model="group.name" style="width: 300px;" />
          </a-col>
          <a-col :span="5">
            <div class="relation-wrapper">
              <div class="label-wrapper">条件关系</div>
              <a-switch
                v-model="group.relationship"
                type="round"
                checked-color="#F53F3F"
                unchecked-color="#14C9C9"
              >
                <template #checked>且</template>
                <template #unchecked>或</template>
              </a-switch>
            </div>
          </a-col>
        </a-row>
        <!--条件-->
        <a-table
          style="margin-top: 10px;"
          :columns="CONDITION_COLUMNS"
          :data="group.conditions"
          :pagination="false"
        >
          <!-- 名称 -->
          <template #name="{ record }">
            <a-input v-model="record.name" allow-clear max-length="20" />
          </template>
          <!-- 类型 -->
          <template #type="{ record }">
            <a-select v-model="record.type">
              <a-option value="SPEL">
                SPEL表达式
              </a-option>
              <a-option value="CLASS">
                类
              </a-option>
            </a-select>
          </template>
          <!-- 表达式 -->
          <template #value="{ record }">
            <a-textarea v-model="record.value" auto-size allow-clear />
          </template>
          <!-- 新增条件 -->
          <template #titleOperate>
            <a-button
              type="primary"
              shape="circle"
              size="mini"
              @click="addCondition(group)"
            >
              <icon-plus />
            </a-button>
          </template>
          <!-- 删除条件-->
          <template #operate="{ record }">
            <a-button
              type="primary"
              status="danger"
              size="mini"
              @click="deleteCondition(group, record)"
            >
              <icon-delete />
            </a-button>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>

    <!-- 预览表单 -->
    <dialog-preview ref="dialogPreviewRef" @submit="getFormConfig" />
  </a-card>
</template>

<script lang="ts" setup>
import { ref, defineModel, defineProps, onMounted } from 'vue';
import { detailForm } from '@/api/system/form';
import { conditionTestProcess } from '@/api/flow/process';
import { CONDITION, GROUP } from '@/components/bpmn-design/config/type';
import { CONDITION_COLUMNS } from '@/components/bpmn-design/config/config';
import { Message, Modal, PaginationProps } from '@arco-design/web-vue';
import shortId from 'shortid';
import DialogPreview from '@/views/form/design/dialog/dialog-preview.vue';

const conditionGroup = defineModel({ type: Object });

const props = defineProps({
  formId: {
    type: String,
    default: () => {
      return '';
    }
  }
});

const dialogPreviewRef = ref();

const formConfig = ref();

const activeKey = ref('');

const viewForm = () => {
  dialogPreviewRef.value.open(formConfig.value);
};

const conditionTest = () => {
  const data = {
    formModel: formConfig.value.formModel,
    conditionGroup: conditionGroup.value
  };
  conditionTestProcess(data).then(res => {
    // todo 展示执行过程
    Message.info(`执行结果 ${res.data}`);
  });
};

const addGroup = () => {
  const key = shortId.generate();
  const groupLength = conditionGroup.value.groups.length;
  conditionGroup.value.groups.push({
    key,
    name: `条件-${groupLength}`,
    relationship: false,
    conditions: []
  });
  activeKey.value = key;
};

const deleteGroup = (key: string) => {
  conditionGroup.value.groups = conditionGroup.value.groups.filter((item: { key: string; }) => item.key !== key);
  if (activeKey.value === key) {
    const groupLength = conditionGroup.value.groups.length;
    activeKey.value = groupLength > 0 ? conditionGroup.value.groups[groupLength - 1].key : '';
  }
};

const addCondition = (group: GROUP) => {
  group.conditions.push({
    key: shortId(),
    name: '',
    type: '',
    value: ''
  });
};

const deleteCondition = (group: GROUP, record: CONDITION) => {
  group.conditions = group.conditions.filter(item => item.key !== record.key);
};

const getFormConfig = () => {
  detailForm(props.formId).then(res => {
    formConfig.value = res.data;
  });
};

onMounted(() => {
  getFormConfig();
  if (conditionGroup.value.groups && conditionGroup.value.groups.length > 0) {
    activeKey.value = conditionGroup.value.groups[0].key;
  }
});
</script>

<script lang="ts">
export default {
  name: 'ConfigCondition'
};
</script>

<style scoped lang="less">
.relation-wrapper {
  display: flex;
  justify-content: end;

  .label-wrapper {
    margin-right: 10px;
    line-height: 24px;
  }
}
</style>